<template>
	<view style="width: 100%;padding: 0 40rpx 40rpx 40rpx;clear: both;">
		<u-form ref="uForm" :model="formData" label-width="200" label-position="top">
			
				<template>
					<u-form-item :label="$t(name.label)" :required="name.required">
						<u-input v-model="formData[name.key]" :placeholder="$t(name.placeholder)"
							:value="name.value ? name.value : ''" :custom-style="textareaStyle" height="150"
							type="textarea" maxlength="1500" />
					</u-form-item>
				</template>
				
				
				<view style="padding-top: 20rpx;padding-bottom: 20rpx;">{{ $t('请选择货物类型')}}</view>
				
				<view :class="lang !='zh'?'nav_ru':''" style="width: 100%;height:62rpx;display: flex;">
					
					<block v-if="lang !='zh'">
						<view class="tabnav_ru" :class="(classCurrent==1 || formData.goods_type==1)?'tab_nav_on':''" @click="change(1)">{{$t('中国货物')}}</view>
						<view class="tabnav_ru" :class="(classCurrent==2 || formData.goods_type==2)?'tab_nav_on':''" @click="change(2)">{{$t('俄罗斯货物')}}</view>
						<view class="tabnav_ru" :class="(classCurrent==4 || formData.goods_type==4)?'tab_nav_on':''" @click="change(4)">{{$t('在中俄罗斯货物')}}</view>
						<view class="tabnav_ru" :class="(classCurrent==3 || formData.goods_type==3)?'tab_nav_on':''" @click="change(3)">{{$t('在俄中国货物')}}</view>
					</block>
					<block v-if="lang ==='zh'">
						<view class="tab_nav" :class="(classCurrent==1 || formData.goods_type==1)?'tab_nav_on':''" @click="change(1)">{{$t('中国货物')}}</view>
						<view class="tab_nav" :class="(classCurrent==2 || formData.goods_type==2)?'tab_nav_on':''" @click="change(2)">{{$t('俄罗斯货物')}}</view>
						<view class="tab_nav" :class="(classCurrent==4 || formData.goods_type==4)?'tab_nav_on':''" @click="change(4)">{{$t('在中俄货')}}</view>
						<view class="tab_nav" :class="(classCurrent==3 || formData.goods_type==3)?'tab_nav_on':''" @click="change(3)">{{$t('在俄中货')}}</view>
					</block>
				</view>
				
				<template>
					<formImages :item="logo" :postlogo="postlogo" @change="selImages" />
				</template>
				
				<template>
					<formVideos :item="buy_videos" :postvideo="postvideo" :postid="postid" @change="selVideos" />
				</template>
				
				<template>
					<u-form-item :label="$t(brand.label)" :label-style="labelStyle"
						:required="brand.required">
						<u-input v-model="formData[brand.key]" :placeholder="$t(brand.placeholder)"
							:placeholder-style="placeholderStyle" :value="brand.value ? brand.value : ''"/>
						<template slot="right" v-if="brand.explain">
							<u-button type="warning" size="mini" @click="clickIcon(brand)">{{$t("释义")}}</u-button>
						</template>
					</u-form-item>
				</template>
				
				<template>
					<actionSheet :item="p_category_id" :postcate="postcate" :postcates="postcates"  @change="selActionSheet" />
				</template>
				
		</u-form>
		
		<u-popup v-model="show">
			<view style="width: 90%;margin-left:5%; margin-top: 60rpx; line-height: 36rpx; text-align: center; font-size: 32rpx;font-weight: bold;">{{ $t(explainTitle)||'' }}</view>
			<view style="width: 90%;margin-left:5%; margin-top: 20rpx; line-height: 36rpx; text-align: center; font-size: 28rpx;">{{ $t(explain)||'' }}</view>
			<button @click="guanbi" style="margin-top: 50rpx;width: 80%;">
				{{$t('关闭')}}
			</button>
		</u-popup>
		
		
	</view>
</template>

<script>
	/**
	 * 表单构建组件
	 * @author zhp
	 * @params name string 表单名
	 * @params label string 文字提示
	 * @params type string 表单类型 input,select,radio,images,files,city,goods_type_select,actionSheet,digit
	 * @params required bool 是否必填，默认true，此处只用户判断是否显示 *
	 * @params rules {} 校验规则
	 * @params details [] 详情数据，select,radio等类型使用
	 */
	import actionSheet from "../components/actionSheet.vue";
	
	import formRadio from "../components/formRadio.vue";
	import formImages from "../components/formImages.vue";
	import formVideos from "../components/formVideos.vue";
	import formCity from "../components/formCity.vue";
	import formCity2 from "../components/formCity2.vue";
	
	import formPortCity from "../components/formPortCity.vue";
	import formPicker from "../components/formPicker.vue";
	import formSelect from "../components/formSelect.vue";
	import formCheckBox from "../components/formCheckBox.vue";

	export default {
		components: {
			actionSheet,
			formRadio,
			formImages,
			formCity,
			formCity2,
			formPicker,
			formSelect,
			formCheckBox,
			formPortCity,
			formVideos
		},
		props: {
			formItems: {
				type: Array,
				default: [],
				required: true
			},
			// 表单数据
			value: {
				type: [Array,Object],
				required: true
			},
			postlogo:{
				type: [Array,Object,Number,String],
				default:''
			},
			postvideo:{
				type: [Array,Object,Number,String],
				default:''
			},
			postcate:{
				type: [Array,Object,Number,String],
				default:''
			},
			postcates:{
				type: [Array,Object,Number,String],
				default:''
			},
			postid:{
				type: [Array,Object,Number,String],
				default:''
			}
		},
		data() {
			return {
				errorMessage: '',
				sel_list1:[],
				sel_list2:[],
				show:false,
				explainTitle:'',
				explain:'',
				is_margin_show:1,
				labelStyle: {
					'word-break': 'break-all',
				},
				lang: getApp().globalData.lang,
				formData: {},
				placeholderStyle: "text-align: left;margin-left:3%;margin-top:3%;",
				textareaStyle: {
					// padding: "20rpx",
					border: "4rpx solid #cccccc",
					height: "400rpx"
				},
				name:{
					key: "name",
					label: "商品名称",
					placeholder: "请输入商品名称",
					type: "text",
					required: true,
					value: "",
					rules: {},
				},
				brand:{
					key: "brand",
					label: "品牌",
					placeholder: "请输入品牌",
					type: "text",
					required: false,
					value: "",
					rules: {},
				},
				//四个分类
				classCurrent: "0",	//货物所在地 选中的分类id
				classification: [ 	//分类数组
					{
						id: 1,
						title: "中国货物",
						url: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20231101/99b3e2e34d1a000b681e45471d091d73.png"
					},
					{
						id: 2,
						title: "俄罗斯货物",
						url: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20231101/99b3e2e34d1a000b681e45471d091d73.png"
					},
					{
						id: 3,
						title: "在俄中国货物",
						url: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20231101/f3163bd0f89f8a641b68068176988800.png"
					},
					{
						id: 4,
						title: "在中俄罗斯货物",
						url: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20231101/f3163bd0f89f8a641b68068176988800.png"
					},
				],
				logo:{
					key: "logo",
					label: "商品主图",
					placeholder: "上传商品主图",
					type: "images",
					required: true,
					value: [],
					rules: {
						length:1
					},
				},
				buy_videos:{
					key: "buy_videos",
					label: "商品视频",
					placeholder: "",
					type: "videos",
					required: false,
					value: [],
					rules: {},
				},
				p_category_id:{
					key: "p_category_id",
					label: "货物分类",
					placeholder: "请选择货物分类 >",
					type: "actionSheet",
					required: true,
					value: {
						pid: 0,
						value: '',
						text: '',
						level: 1,
						type: 'release_goods',
					},
					rules: {},
					child: {
						key: "category_id",
						label: "二级分类",
						placeholder: "请选择二级分类 >",
						type: "actionSheet",
						required: true,
						value: {
							pid: 0,
							value: '',
							text: '',
							level: 2,
							type: 'release_goods',
						},
						rules: {},
					}
				},
				// rules: {
				//     name: {
				//         required: true,
				//         message: '请输入名称',
				//         trigger: ['change','blur']
				//     }
				// }
			}
		},
		mounted() {

			// console.log('buildForm-mounted-index formItems', this.formItems)
			// console.log('buildForm-mounted-index value', this.value)
			// console.log('buildForm-mounted-index formData', this.formData)
			// console.log(this.value);

			this.formData = this.value
			//this.formData.logo.value=this.value.logo
		},
		watch: {
			formData: {
				handler(val) {
					this.$emit('input', val)
				},
				deep: true,
			},
			formItems: {
				handler(val) {
					this.formItems = val
				},
			}
		},
		methods: {
			//切换货物所在地 分类id
			change(id) {
				console.log(id);
				this.classCurrent = id
				this.formData.goods_type=id
				// this.GoodsList()
			},
			checkAmount(event) {
			  const value = event;
			  const regex = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/; // 正则表达式，匹配最多有两位小数的金额数字
			  if (!regex.test(value)) {
				this.$u.toast(this.$t('请输入正确的金额格式!'));
			  }
			},
			selActionSheet(key, value,list) {  
				console.log({'key':key,'value':value,'list':list})
				this.formData[key] = value
				this.sel_list1 = list	
				this.$emit('changeActionSheet', value,this.sel_list1,key)
							},
			selActionSheet2(key, value,list) {
				console.log({'key':key,'value':value,'list':list})
				this.formData[key] = value
				this.sel_list2 = list
				this.$emit('changeActionSheet2', value,this.sel_list2,key)
			},
			guanbi(){
				this.show=false
			},
			// selCheckbox(key, value) {
			// 	this.formData[key] = value
			// },
			// selRadio(key, value) {
				
			// 	if(key=='is_margin'){
			// 		if(value=='1'){
			// 			this.is_margin_show=1
			// 		}else{
			// 			this.is_margin_show=2
			// 		}
			// 	}
				
			// 	this.formData[key] = value
			
			
			// },
			selImages(key, value) {
				console.log(key);
				this.formData[key] = value
			},
			// selFiles(key, value) {
			// 	this.formData[key] = value
			// },
			// selFiles2(key, value) {
			// 	this.formData[key] = value
			// },
			selVideos(key, value) {
				this.formData[key] = value
			},
			// selCity(key, value) {
			// 	this.formData[key] = value
			// },
			// selPicker(key, value) {
			// 	this.formData[key] = value
			// },
			// selectChange(key, value) {
			// 	this.formData[key] = value
			// },
			clickIcon(item) {
				if (item.explain) {
					let me = this;
					// uni.showModal({
					// 	title: me.$t(item.explainTitle),
					// 	content: me.$t(item.explain),
					// 	showCancel: false,
					// 	confirmText: "ok"
					// })
					
					me.explainTitle = item.explainTitle
					me.explain = item.explain
					
					me.show=true
				}
			}
		}
	}
</script>

<style lang="scss">
	.nav_z{
		width: 80%;height:50rpx;display: flex;position: absolute;top: 15rpx; left: 20%;
	}
	.tab_nav{ width: 23%;margin:0 1%; line-height: 50rpx;text-align: center;border-radius: 10rpx;   color: #606266;font-size: 24rpx ;background-color: rgb(237, 237, 237);padding:1% 0 ;}
	.tabnav_ru{width: 23%;margin:0 1%;line-height: 24rpx; text-align: center;border-radius: 10rpx;   color: #606266;font-size: 16rpx ;background-color: rgb(237, 237, 237);padding-top:10rpx;padding-bottom: 20rpx;}
	
	.tab_nav_on{ color: #fff !important;background-image: linear-gradient(to right, #ffd234, #ff884d) !important;}
</style>